<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .title {
      background-color: #01c4fa;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    #app .el-dialog__header {
      padding: 0;
    }
  </style>
  <body>
    <!-- dialog
   el-dialog
      title:标题
      visible.sync="控制弹框是否显示"  值是boolean  true显示  false不显示
      width:宽度
      show-close:boolean值  true显示关闭按钮(默认显示)  false不显示关闭 

    slot="title/footer" 
      可以重写title与footer

-->

    <div id="app">
      <el-button @click="isShow=true">点我打开弹框</el-button>
      <el-dialog
        title="测试弹框"
        :visible.sync="isShow"
        width="500px"
        :show-close="false"
      >
        <div slot="title" class="title">
          用户注册
        </div>
        <div>测试一下内容</div>
        <div slot="footer">
          <el-button type="primary">确定</el-button>
          <el-button @click="isShow=false">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <script src="./vue.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="./ele.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          isShow: false,
        },
      });
    </script>
  </body>
</html>
